<script lang="ts" setup>
import TableArea from 've-table-area/index.vue'
import TableColumn from 've-table-column/index.vue'
import {tableHeight} from '@/assets/js/tableHeight'
import {computed, ref} from 'vue'
import {createEmitter} from '@/assets/js/eventBus'
import {ActuatorInfoVo} from "@/interface/vo/task/ActuatorInfoVo.ts";
import {Delete} from "@element-plus/icons-vue";
import {useCommonStore} from "@/pinia/common.ts";

const emitter = createEmitter()

const props = defineProps({
  loading: {
    type: Boolean,
    required: true,
    default: () => false
  },
  tableData: {
    type: Array as () => Array<ActuatorInfoVo>,
    required: true,
    default: () => []
  }
})

const columnList = computed(() => [
  {
    sortable: 'custom',
    prop: 'actuatorName',
    label: '执行器名称'
  },
  {
    sortable: false,
    prop: 'normal',
    coverColumn: true,
    label: '是否正常'
  }
])

const onSortChange = (column: any) => {
  emitter.emit('refresh', column)
}

const handleRefresh = () => {
  emitter.emit('refresh')
}

const _fullScreen = ref(false)

const _tableHeight = ref()

const handleFullScreen = (fullScreen: boolean, tableHeight: number) => {
  _fullScreen.value = fullScreen
  _tableHeight.value = tableHeight
}

const emits = defineEmits(['onTableClick'])

const handleClick = (type: string, id: string) => {
  emits('onTableClick', type, id)
}

</script>

<template>
  <TableArea>
    <template #main>
      <el-table v-loading="props.loading"
                :data="props.tableData"
                :default-sort="{ prop: 'createTime', order: 'descending' }"
                :height="_fullScreen? _tableHeight: tableHeight"
                border
                @sort-change="onSortChange">
        <TableColumn
            :column-list="columnList"
            :index="false"
            :table-height="tableHeight"
            operation-width="180px"
            region-class="ve-table"
            @handle-full-screen="handleFullScreen"
            @handle-refresh="handleRefresh">
          <template #normal="scope">
            <el-switch
                v-model="scope.row.normal"
                active-text="是"
                inactive-text="否"
                disabled
                inline-prompt
            />
          </template>
          <template #default="scope">
            <el-button
                :icon="Delete"
                plain
                size="small"
                type="danger"
                @click="handleClick('delete', scope.row.actuatorName)">
              删除
            </el-button>
          </template>
        </TableColumn>
      </el-table>
      <slot name="pagination"/>
    </template>
  </TableArea>
</template>

<style scoped>

</style>
